<template>
  <div class="mainbody">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >{{ mainName }}</el-breadcrumb-item>
          <el-breadcrumb-item >{{facName}}</el-breadcrumb-item>
          <p>&nbsp;</p>
      </el-breadcrumb>
      <el-main>
        <div >
          <el-row>
            <el-menu
              mode="horizontal"
              text-color="#3b3b3a"
              active-text-color="#f66715">
              <el-menu-item class="sort-item" @mouseenter="setSortHover" width="100%">全部评论</el-menu-item>
            </el-menu>
          </el-row>
          <el-cow>
            <el-col :span="6" v-for="(Comment,index) in FindCommentByUserName" :key="index" style="position: relative;margin:20px 40px 20px 40px;">
                <el-card style=" padding: 14px;">
                  <div>
                    <img :src="Comment.goodsImage">
                  </div>
                  <div>
                    <el-rate v-model="Comment.goodsRating" show-text>
                    </el-rate>
                  </div>
                  <div>{{ Comment.goodsComment }}</div>
                </el-card>
            </el-col>
          </el-cow>
        </div>
      </el-main>
  </div>
</template>
<script>
import {userInfo ,findCommentByUserName,getGoodsById} from "../../ajax/get"
//   import {addGoodsOrder} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
export default {
    name: "collect",
    data () {
        return {
          nickName: "", // 昵称
          userName:"",//用户名
          mainName:"全部功能",
          facName:"我的收藏",
          routerFlag: "addAddress",
          addAddressForm:{},//添加新的收获地址对象
          getAddressForm:{},//获取收获地址对象
          FindCommentByUserName:[],//通过用户名查找评价记录
          message:[],//获取收获地址信息
          goodsImage:[],//商品图片
        };
    },
    methods: {
      setSortHover: function () {
          $(".sort-item").hover(function(){
              $(this).css("color","white");
              $(this).addClass("skin-bg")
          }, function(){
              $(this).css("color","#f66715");
              $(this).removeClass("skin-bg")
          });
        },
          // 查找用户信息
      findUserInfo(userName) {
        userInfo(userName).then(res => {
          console.log("用户信息:",res);
          this.nickName = res.data.data.nickName;
          this.userName = res.data.data.userName;
        })
        // 根据用户名查找评价记录
        findCommentByUserName(sessionStorage.getItem("userName")).then(com => {
            console.log(com,"评价记录");
            this.FindCommentByUserName = com.data.data;
            console.log(this.FindCommentByUserName,"新评价记录");
            this.FindCommentByUserName = this.FindCommentByUserName.map(b=>({
              ...b,
              goodsImage:"", // 商品图片
            }))
            console.log(this.FindCommentByUserName,"新评价记录111");
            let length = this.FindCommentByUserName.length;
            for(let i=0;i<=length;i++){
            getGoodsById(this.FindCommentByUserName[i].goodsId).then(img =>{
              this.FindCommentByUserName[i].goodsImage =img.data.data.goodsImage;
            })
          }
          console.log(this.FindCommentByUserName,"新评价记录222");
        })
        },
    },
    created() {
      this.findUserInfo(sessionStorage.getItem("userName"));
    }
}
</script>

<style scoped>

  /* @import "../assets/css/personalHomepage.css"; */
</style>